<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>全部回复</title>
    <link rel="stylesheet" type="text/css" href="__CSS__api.css"/>
    <link rel="stylesheet" type="text/css" href="__CSS__aui.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__dropload.css" />

    <style>
        .aui-bar-nav .aui-iconfont {
            position: relative;
            font-family: "aui_iconfont" !important;
            font-size: 0.75rem;
            color: #E73C5C;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            height: 2.4rem;
        }

        .aui-bar-nav {
            background-color: #fff;
        }

        .aui-icon-tu {
            height: 2.4rem;
            width: 49px;
            background: url('__IMG__left.png') no-repeat 0.5rem center;
            background-size: 22px 22px;
        }

        .aui-bar-nav .aui-title {
            font-size: 0.9rem;
            color: #333333;
            font-weight: 500;
        }
        .aui-icon-rightu {
            height: 2.4rem;
            width: 49px;
            background: url('__IMG__dian.png') no-repeat 0.6rem center;
            background-size: 22px 22px;
        }
        body {
            padding-bottom:70px;
        }
        .list_content {
            background-color: #ffffff;
            width: 100%;
            height: auto;
            padding:1rem 0.75rem 0rem 0.75rem;
            margin-bottom:0.5rem;
            margin-top:0.5rem;
        }
        .tit_top {
            width: 100%;
            color: #4D4D4D;
            font-size: 0.75rem;
            line-height: 1.05rem;
            font-weight: bold;
            margin-bottom:0.5rem;
        }
        .tit_content {
            width: 100%;
            color: #666;
            font-size: 0.7rem;
            line-height: 1rem;
            height: auto;
            padding-top:0.75rem;
            padding-bottom: 0.75rem;
        }
        .photoAll {
            width: 100%;
            padding-bottom: 0.75rem;
        }
        .photo {
            display: inline-block;
            position: relative;
        }
        .photo:nth-child(3n+2) {
            margin-right: 12.5px;
            margin-left: 12.5px;
        }
        .photo img {
            width: 100%;
            height: 100%;
        }
        .time{
            padding-left:0.6rem;
        }
        .intro{
            color: #999999;
            font-size: 0.7rem;
            padding-bottom:0.9rem;
        }
        .comment {
            background-color: #ffffff;
            width: 100%;
            height: auto;
            padding:0 0.75rem;
            margin-top: 0.525rem;
        }
        .number{
            padding-top:1.025rem;
            padding-bottom:0.35rem;
            color: #333;
            font-size: 0.7rem;
        }
        .comment_one{
            padding-top:0.525rem;
            padding-bottom:0.525rem;
        }
        .avatar{
            width: 1.75rem;
            height: 1.75rem;
            margin-right:0.75rem;
            border-radius: 50%;
        }
        .avatar img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
        .name{
            height: 1.75rem;
            line-height: 1.75rem;
            color: #333;
            font-size: 13px;
        }
        .delete{
            width: 0.85rem;
            height: 0.85rem;
            margin-top:0.45rem;
        }
        .talk_xq{
            color: #333;
            font-size: 14px;
            padding-top:0.325rem;
            padding-bottom:0.7rem;
            line-height:1rem;
            word-break: break-all;
            word-wrap: break-word;
        }
        .photooo {
            display: inline-block;
            position: relative;
            border-radius:5px;
        }
        .photooo:nth-child(3n+2) {
            margin-left:11px;
            margin-right:11px;
        }
        .photooo img {
            width: 100%;
            height: 100%;
            border-radius:5px;
        }
        .time1{
            color: #B3B3B3;
            font-size: 12px;
        }
        .zan1{
            width: 22px;
            height: 30px;
            display: inline-block;
            background: url('__IMG__main1_zan.png') no-repeat center center;
            background-size: 15px 14px;
            vertical-align: bottom;
        }

        .comment_footer {
            height: 30px;
            line-height: 30px;
            color: #b3b3b3;
            font-size: 0.8rem;
            margin-top: 0.25rem;
        }

        .comment_time{
            font-size: 0.6rem;
        }

        .zan {
            width: 22px;
            height: 30px;
            display: inline-block;
            background: url('__IMG__main1_nozan.png') no-repeat center 7px;
            background-size: 15px 15px;
            vertical-align: bottom;
        }

        .comment_total {
            width: 22px;
            height: 30px;
            display: inline-block;
            background: url('__IMG__main1_news.png') no-repeat center center;
            background-size: 16px 16px;
            vertical-align: bottom;
        }
        .float_right{
            display: inline-block;width: auto;
            height: 30px;
            line-height: 30px;
            float: right;
        }
        .comment_all{
            margin-right: 1rem;
        }

        .comment_imgs,.comment_imgs1,.comment_imgs2{
            margin-bottom: 0.5rem;
        }
        .comment_imgs img,  .comment_imgs1 img ,  .comment_imgs2 img  {
            float: left;
            margin-right: 0.5rem;
            border-radius: 0.25rem;
        }
        .comment_imgs2 img{
            width: 8.5rem;
            height: 8.5rem;
        }

        .comment_imgs img:last-child,.comment_imgs1 img:last-child,.comment_imgs0 img:last-child {
            float: left;
            margin-right: 0;
        }
        .total{
            font-size:14px;
            color:#333333;
            padding-top:1rem;
        }
        #zan_num1 {
            color: #B3B3B3;
            font-size: 15px;
            margin-left: 5px;
            margin-top:1px;
        }
    </style>
    <style>

        .flex-wrap{ display: -webkit-box;	display:box;display: -webkit-flex;	display: flex; }
        .flex-con{  -webkit-box-flex: 1;     -webkit-flex: 1;    flex: 1;}
        .flex-vertical{  -webkit-box-horizontal: vertical;-webkit-flex-flow: column; flex-flow: column;}
        .wei_huifu{
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 999;
            box-sizing: border-box;
            /*padding-bottom: 20px;*/
            /*background: blue;*/
        }
        .wei_huifu0{
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
        }
        .wei_huifu1{
            width: 100%;
            height: 50px;
            background-color: #fff;
            position: absolute;
            bottom: 0;
        }

        .wei_huifu2{
            width: 74px;
            background-color: #fff;
            color: #47A1FE;
            line-height: 50px;
            text-align: center;
            font-size: 16px;
            height: 50px;
            border: 0;
        }

        input[type='text'].wei_input{
            width: 100%;
            height: 30px;
            background-color: #f5f5f5;
            border-radius: 15px;
            outline: 0;
            margin-top: 10px;
        }
        .hidden{
            display: none;
        }
        *::-webkit-scrollbar {
            display: none !important;
        }
        .aui-icon-tu {
            height: 2.4rem;
            width: 49px;
            background: url('__IMG__left.png') no-repeat 0.5rem center;
            background-size: 22px 22px;
        }
    </style>
    <style>
        .allImgCommen {
            padding-bottom: 0.5rem;
        }

        .img2 {
            width: 8.5rem;
            height: 8.5rem;
        }
        /*两张*/
        .img3 {
            width: 5.5rem;
            height: 5.5rem;
            margin-right: 0.5rem;
            float: left;
        }
        /*三张*/
        .img4 {
            width: 3.84rem;
            height: 3.84rem;
            float: left;
        }

        .img4:nth-child(3n+2) {
            margin-right: 2%;
            margin-left: 2%;
        }
    </style>
</head>
<body>

<div class="flex-vertical wei_huifu hidden" id="wei_huifu">
    <div class="flex-con wei_huifu0" onclick="wei_hui2()"></div>
    <input type="hidden" name="my_comment_id" value="">
    <div class="wei_huifu1">
        <div class="flex-wrap">

            <div class="flex-con" style="padding-left:15px;">
                <input type="text" id="jianpan" autofocus="autofocus"  name="huifucontent" value="" placeholder="输入回复内容" class="wei_input">
            </div>
            <button class="wei_huifu2" onclick="wei_hui1()">回复</button>
        </div>
    </div>
</div>

<header class="aui-bar aui-bar-nav underLine" style="padding-top:25px;" id="header">
    <a class="aui-pull-left" tapmode="active" onclick="history.go(-1)"> <span class="aui-iconfont aui-icon-tu"> </span> </a>
    <div class="aui-title">{$oneComment.sonNum}条回复</div>
</header>
<div class="comment">
    <div class="flex-wrap comment_one">
        <div class="avatar">
            <img  src="{$oneComment.user_image?$oneComment.user_image:'__IMG__zhanweitu/main1.png'}" />
        </div>
        <div class="flex-con talk">
            <div class="name flex-wrap">
                <div class="flex-con aui-ellipsis-1">{$oneComment.user_username}</div>
                {if $oneComment['comment_user'] == $user_id}
                <div class="delete" onclick="zj_fb(this)" idd="{$oneComment.comment_id}">
                    <img  src="__IMG__del@3x.png" />
                </div>
                {/if}
            </div>
            <div class="talk_xq">
                {$oneComment.comment_content}
            </div>

            <div class="allImgCommen after">

                <!-- 评论图片-->
                {if count($oneComment['comment_img']) ==1 }
                <img src="{$oneComment['comment_img'][0]}" class="img2">
                {elseif count($oneComment['comment_img']) ==2 /}
                <img src="{$oneComment['comment_img'][0]}" class="img3">
                <img src="{$oneComment['comment_img'][1]}" class="img3">
                {elseif count($oneComment['comment_img']) ==3  /}
                <img src="{$oneComment['comment_img'][0]}" class="img4">
                <img src="{$oneComment['comment_img'][1]}" class="img4">
                <img src="{$oneComment['comment_img'][2]}" class="img4">
                {/if}
                <!-- 评论图片结束-->
            </div>
            <div class="comment_footer">
                <span class="comment_time">{$oneComment.create_time}</span>
                <span class="float_right ">
                    {if $oneComment.like==1}
                    <span class="zan1" onclick="fnZan1(this)" iddtype="1" idd="{$oneComment.comment_id}" id="id_{$oneComment.comment_id}"></span>
                    {else /}
                    <span class="zan" onclick="fnZan1(this)" iddtype="1" idd="{$oneComment.comment_id}" id="id_{$oneComment.comment_id}"></span>
                    {/if}
                     <span id="zan_num">{$oneComment.like_num}</span>
                </span>
                <span class="float_right comment_all" onclick="wei_hui(this)" idd_name="{$oneComment.user_username}" idd="{$oneComment.comment_id}"><span class="comment_total"></span>  {$oneComment.sonNum} </span>
            </div>


        </div>
    </div>

</div>
<div class="comment">
    <div class="total">全部回复</div>
    <div class="upOrDown">
        <div class="upOrDown_data">
            {volist name="oneComment['son']" id="vv"}
            <div class="flex-wrap comment_one">
                <div class="avatar">
                    <img  src="{$vv.user_image?$vv.user_image:'__IMG__zhanweitu/main1.png'}" />
                </div>
                <div class="flex-con talk">
                    <div class="name flex-wrap">
                        <div class="flex-con aui-ellipsis-1">{$vv.user_username}</div>
                        {if $vv['comment_user'] == $user_id}
                        <div class="delete" style="float: right" onclick="zj_fb1(this)" idd="{$vv.comment_id}">
                            <img  src="__IMG__del@3x.png" />
                        </div>
                        {/if}
                    </div>
                    <div class="talk_xq">
                        {$vv.comment_content}
                    </div>
                    <div class="flex-wrap">
                        <div class="flex-con time1">{$vv.create_time}</div>
                        {if $vv.like==1}
                        <div class="zan1" onclick="fnZan1(this)" iddtype="2"  idd="{$vv.comment_id}" id="id_{$vv.comment_id}"></div>
                        {else /}
                        <div class="zan" onclick="fnZan1(this)" iddtype="2"  idd="{$vv.comment_id}" id="id_{$vv.comment_id}"></div>
                        {/if}
                        <span id="zan_num1" style="position: relative;top:4px">{$vv.like_num}</span>
                    </div>
                </div>
            </div>
            {/volist}
        </div>
    </div>
</div>

<input type="hidden" name="comment_id" value="{$comment_id}">
<input type="hidden" name="classroom_id" value="{$oneComment.classroom_id}">
<input type="hidden" name="user_id" value="{$user_id}">
<img src="__IMG__zhanweitu/main1.png" alt="" style="display: none"  id="imgss">
</body>
<script type="text/javascript" src="__JS__jquery.min.js"></script>
<script type="text/javascript" src="__JS__layer_mobile/layer.js"></script>
<script type="text/javascript" src="__JS__dropload.min.js"></script>
<script type="text/javascript" src="__JS__api.js"></script>
<script type="text/javascript" src="__JS__tt.js"></script>
<script>

    //显示
    function wei_hui(el){
        var idd=$api.attr(el,'idd');
        var idd_name=$api.attr(el,'idd_name');
        document.getElementById('wei_huifu').className='flex-vertical wei_huifu';

        $('input[name="my_comment_id"]').val(idd);
        $('input[name="huifucontent"]').attr('placeholder',"回复"+idd_name);

        $("body").css("overflow-y",'hidden');
        $("#jianpan").trigger("click").focus();
        setTimeout(function () {
            $('#jianpan').scrollIntoView(true);
        },1000);

    }
    //隐藏
    function wei_hui1(){
        var content = $.trim($('input[name="huifucontent"]').val());
        var comment_id = $('input[name="comment_id"]').val();
        var user_id = $('input[name="user_id"]').val();
        var classroom_id = $('input[name="classroom_id"]').val();
        if(content>200){
            layer.open({
                content:"回复不能超过200个字节",
                skin: 'msg'
                ,time: 3 //2秒后自动关闭
            });
            return false;
        }
        if(content <= 0){
            layer.open({
                content:"回复不能为空",
                skin: 'msg'
                ,time: 3 //2秒后自动关闭
            });
            return false;
        }
        $.ajax({
            url:'{:url("Classroom/createHF")}',
            data:{comment_id:comment_id,content:content,classroom_id:classroom_id,user_id:user_id},
            type:'POST',
            dataType:'JSON',
            success:function (data) {
                if(data.status==200){
                    document.getElementById('wei_huifu').className='flex-vertical wei_huifu hidden';
                    window.location.reload();

                }else {
                    layer.open({
                        content:data.msg,
                        skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                    document.getElementById('wei_huifu').className='flex-vertical wei_huifu hidden';

                    window.location.reload();
                }
            }
        })
    }
    //隐藏
    function wei_hui2(){
        document.getElementById('wei_huifu').className='flex-vertical wei_huifu hidden';
    }


//    window.onload = function () {
//        var user_id = $('input[name="user_id"]').val();
//        alert(user_id)
//    }
    //删除评论
    function zj_fb(el) {
        var idd=$api.attr(el,'idd');
        var classroom_id = $('input[name="classroom_id"]').val();
        var user_id = $('input[name="user_id"]').val();
        $.ajax({
            url:'{:url("Classroom/delComment")}',
            data:{comment_id:idd,type:1,classroom_id:classroom_id},
            type:'POST',
            dataType:'JSON',
            success:function (data) {
                if(data.status==200){
                    layer.open({
                        content: '操作成功'
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                    setTimeout(function () {
                        location.href= 'http://share.verynurse.com/share/html/main3/classroomdetail.html?id11=' + classroom_id+"&user="+user_id;
                    },1000);
                }else{
                    layer.open({
                        content: '操作失败'
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                    window.location.reload();
                }
            }
        })
    }

    //删除回复
    function zj_fb1(el) {
        var idd=$api.attr(el,'idd');
        var classroom_id = $('input[name="classroom_id"]').val();
        var user_id = $('input[name="user_id"]').val();
        var co_id = $('input[name="comment_id"]').val();
        $.ajax({
            url:'{:url("Classroom/delComment")}',
            data:{comment_id:idd,type:2,classroom_id:classroom_id},
            type:'POST',
            dataType:'JSON',
            success:function (data) {
                if(data.status==200){
                    layer.open({
                        content: '操作成功'
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                    setTimeout(function () {
                        location.href='{:url("Classroom/allComment")}?comment_id=' + co_id;

                    },1000)
                    // location.href= 'http://share.verynurse.com/share/html/main3/classroomdetail.html?id11=' + classroom_id+"&user="+user_id;
                }else{
                    layer.open({
                        content: '操作失败'
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                    window.location.reload();
                }
            }
        })
    }

    //点赞
    function fnZan1(el) {
        var idd=$api.attr(el,'idd');
        var iddtype=$api.attr(el,'iddtype');
        var user_id = $('input[name="user_id"]').val();
        $.ajax({
            url:'{:url("Classroom/likeComment1")}',
            data:{comment_id:idd,type:iddtype,user_id:user_id},
            type:'POST',
            dataType:'JSON',
            success:function (data) {
                if(data.status==200){
                    if ($api.hasCls($api.byId('id_' + idd), 'zan1')) {
                        $api.removeCls($api.byId('id_' + idd), 'zan1');
                        $api.addCls($api.byId('id_' + idd), 'zan');
                        if(iddtype==1){
                            el.nextElementSibling.innerHTML=parseInt(el.nextElementSibling.innerHTML)- 1 ;
                        }
                        if(iddtype==2){
                           el.nextElementSibling.innerHTML=parseInt(el.nextElementSibling.innerHTML)- 1;
                        }
                        return;
                    } else {
                        $api.removeCls($api.byId('id_' + idd), 'zan');
                        $api.addCls($api.byId('id_' + idd), 'zan1');
                        if(iddtype==1){
                            el.nextElementSibling.innerHTML=parseInt(el.nextElementSibling.innerHTML)+ 1 ;
                        }
                        if(iddtype==2){
                            el.nextElementSibling.innerHTML=parseInt(el.nextElementSibling.innerHTML)+ 1 ;
                        }
                        return;

                    }
                }
            }
        })
    }
</script>
<script>
    var page = 1;
    /**
     * 上拉加载，下拉刷新
     */
    var dropload = $('.upOrDown').dropload({
        scrollArea : window,
        autoLoad : true,
//        domUp : {
//            domClass   : 'dropload-up',
//            domRefresh : '<div class="dropload-refresh">↓下拉刷新-自定义内容</div>',
//            domUpdate  : '<div class="dropload-update">↑释放更新-自定义内容</div>',
//            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>'
//        },
//        domDown : {
//            domClass   : 'dropload-down',
//            domRefresh : '<div class="dropload-refresh">刷新</div>',
//            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
//            domNoData  : '<div class="dropload-noData">无数据</div>'
//        },
        loadDownFn : function(me){
            var keyword = $('input[name="comment_id"]').val();
            var user_id = $('input[name="user_id"]').val();
            var imgss = $('#imgss')[0].src;
//            alert(imgss)
            page++;
            $.ajax({
                url:'{:url("Classroom/ajaxAllComment")}',
                data:'page='+page+'&comment_id='+keyword+'&user_id='+user_id,//
                type:'POST',
                dataType:'JSON',
                success: function(data){
                    var arrLen = data.msg.length;
                    if(arrLen<=0){

                        me.lock();
//                         无数据
                        me.noData(true);
                        // 每次数据加载完，必须重置
                        me.resetload();
                    }else{
                        var datas = data.msg;
                        $.each(datas,function(key,v){
                            var _html='';
                            _html += '<div class="flex-wrap comment_one">';
                            _html += '<div class="avatar">';
                            if(v.user_image == null || v.user_image == ''){
                                _html += '<img  src="' + imgss + '" />';
                            }else{
                                _html += '<img  src="' + v.user_image + '" />';
                            }
                            _html += '</div>';
                            _html += '<div class="flex-con talk">';
                            _html += '<div class="name flex-wrap">';
                            _html += '<div class="flex-con aui-ellipsis-1">' + v.user_username + '</div>';

                            if(v.user_del == 1){
                                _html += '<div class="delete" style="float: right" onclick="zj_fb1(this)" idd="' +  v.comment_id + '">';
                                _html += '<img  src="__IMG__del@3x.png" /></div>';
                            }

                            _html += '</div>';
                            _html += '<div class="talk_xq">' + v.comment_content + '</div>';
                            _html += '<div class="flex-wrap">';
                            _html += '<div class="flex-con time1">' + v.create_time + '</div>';
                            if(v.like == 1){
                                _html += '<div class="zan1" onclick="fnZan1(this)" iddtype="2"  idd="' + v.comment_id + '" id="id_' + v.comment_id + '"></div>';
                            } else{
                                _html += '<div class="zan" onclick="fnZan1(this)" iddtype="2"  idd="' + v.comment_id + '" id="id_' + v.comment_id + '"></div>';
                            }
                            _html += '<span id="zan_num1">' + v.like_num + '</span>';
                            _html += '</div></div></div>';

                            $(".upOrDown_data").append(_html);
                        });
//                        $('.upOrDown_data').append(data);
                        // 每次数据加载完，必须重置
                        me.resetload();
                    }

                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        loadUpFn : function(me){
            var keyword = $('input[name="comment_id"]').val();
            var user_id = $('input[name="user_id"]').val();
            var imgss = $('#imgss')[0].src;
            page = 1;
            $.ajax({
                url:'{:url("Classroom/ajaxAllComment")}',
                data:'page='+page+'&comment_id='+keyword+'&user_id='+user_id,
                type:'POST',
                dataType:'json',
                success: function(data){
                    $('.upOrDown_data').empty();//
                    var datas = data.msg;
                    $.each(datas,function(key,v){
                        var _html='';
                        _html += '<div class="flex-wrap comment_one">';
                        _html += '<div class="avatar">';

                        if(v.user_image == null || v.user_image == ''){
                            _html += '<img  src="' + imgss + '" />';
                        }else{
                            _html += '<img  src="' + v.user_image + '" />';
                        }
                        _html += '</div>';
                        _html += '<div class="flex-con talk">';
                        _html += '<div class="name flex-wrap">';
                        _html += '<div class="flex-con aui-ellipsis-1">' + v.user_username + '</div>';

                        if(v.user_del == 1){
                            _html += '<div class="delete" style="float: right" onclick="zj_fb1(this)" idd="' +  v.comment_id + '">';
                            _html += '<img  src="__IMG__del@3x.png" /></div>';
                        }

                        _html += '</div>';
                        _html += '<div class="talk_xq">' + v.comment_content + '</div>';
                        _html += '<div class="flex-wrap">';
                        _html += '<div class="flex-con time1">' + v.create_time + '</div>';
                        if(v.like == 1){
                            _html += '<div class="zan1" onclick="fnZan1(this)" iddtype="2"  idd="' + v.comment_id + '" id="id_' + v.comment_id + '"></div>';
                        } else{
                            _html += '<div class="zan" onclick="fnZan1(this)" iddtype="2"  idd="' + v.comment_id + '" id="id_' + v.comment_id + '"></div>';
                        }
                        _html += '<span id="zan_num1">' + v.like_num + '</span>';
                        _html += '</div></div></div>';

                        $(".upOrDown_data").append(_html);


                    });
                     me.resetload();
                    me.unlock();
                    me.noData(false);

                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    me.resetload();
                }
            });
        }
    });
</script>
</html>
